<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
		<link rel="icon" type="image/png" href="images/icon.png"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Console Server Management</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <style type="text/css"></style>
    </head>
    <script type="text/javascript">
	//<!--
		
		var personOverSwitch  = function(e) {
			this.name  = e.hasOwnProperty('name') ? e.name : '';
			this.model = e.hasOwnProperty('model') ? e.model : '';
			this.port  = e.hasOwnProperty('port') ? e.port : '';
			this.avatarUrl = e.hasOwnProperty('avatarUrl') ? e.avatarUrl : '';
			this.skype = e.hasOwnProperty('skype') ? e.skype : '';
			
		}
		
		personOverSwitch.prototype.getUserName = function() {
			return this.name;
		}
		
		personOverSwitch.prototype.getSkypeAccount = function() {
			return this.skype;
		}
		
		personOverSwitch.prototype.getPortUsing = function() {
			return this.port;
		}
		
		personOverSwitch.prototype.getSwitchPortId = function() {
			return (this.model + '_' + this.port);
		}
		
		personOverSwitch.prototype.displayAvatar = function() {
			var userName = this.getUserName();
			var portUsing = this.getPortUsing();
			var skypeAcc = this.getSkypeAccount();
			
			if (userName != '') {			
				var switchPortId = this.getSwitchPortId();
				var switchNode = document.getElementById(switchPortId);
				var childrenNode = switchNode.getElementsByTagName('div');
				var len = childrenNode.length;
				for (var i = 0; i < len; i++) {	
					//console.log(childrenNode[i].getAttribute('class'));
					if (childrenNode[i].getAttribute('class') == 'avatar' || childrenNode[i].getAttribute('class') == 'off_line') {
						var avatarNode = childrenNode[i];
					}
					
					if (childrenNode[i].getAttribute('class') == 'name') {
						var nameNode = childrenNode[i];
					}
					
					if (childrenNode[i].getAttribute('class') == 'telnet_port') {
						var portNode = childrenNode[i];
					}
					
					if (childrenNode[i].getAttribute('class') == 'avatar') {
						var avartarNode = childrenNode[i];
					}
					
					if (childrenNode[i].getAttribute('class') == 'skype') {
						var skypeNode = childrenNode[i];
					}
					
					if (childrenNode[i].getAttribute('class') == 'disconnect') {
						var disconnectNode = childrenNode[i];
					}
				}

				if (userName != 'nobody') {
					if(userName == 'server_room')
						avatarNode.style.background = 'url(images/server_room.png)';
					else
						avatarNode.style.background = this.avatarUrl;
					nameNode.innerHTML = userName;
					portNode.innerHTML = portUsing;
					if((userName != 'server_room')&&(userName != 'anonymous'))
						skypeNode.innerHTML = '<a href="skype:' + skypeAcc + '?chat"><img src="images/skype_online.png"></a>';
					else
						skypeNode.innerHTML = '<img src="images/skype_offline.png">';
					/* disconnectNode.innerHTML = '<img src="images/disconnect_online.png">'; */
					disconnectNode.style.background = 'url(images/disconnect_online.png)';
				} else {		
					skypeNode.innerHTML = '<img src="images/skype_offline.png">';
					avatarNode.style.background = 'url(images/nobody.jpg)';
					nameNode.innerHTML = userName;
					portNode.innerHTML = portUsing;
					/* disconnectNode.innerHTML = '<img src="images/disconnect_offline.png">'; */
					disconnectNode.style.background = 'url(images/disconnect_offline.png)';
				}										
			}	
		}
		
		
		window.onload = function () {
			var timer = setInterval(function() {
				$.ajax({
					type: 'GET',
					url: 'controller.php',			
					success: function(jsonText) {
						var data = $.parseJSON(jsonText);
						var len = data.length;
						for( var i = 0; i < len; i++) {
							var item = data[i]; 
							var tmpUser = new personOverSwitch(item);
							tmpUser.displayAvatar();
						}
					}									
				});	
			}, 500)
		}
		//-->
	</script>
	
<body>
        <div class="header">
			<div id="logo"></div>
			<div class="bubble">
				<p>CONSOLE SERVER MANAGEMENT</p>
			</div>	
		</div>
		
		<div id="cover">
		    <div id="cover_background">
				<div class="btn_navi">
					<div class="btn_config_macro">
						<form method="POST" action="config_macro.php">
							<input type="submit" id="config_macro" value="Config Macro" />
						</form>
					</div>

					<div class="btn_home">
						<form method="POST" action="index.php">
							<input type="submit" id="home" value="Home" />
						</form>
					</div>
				</div>
			</div>
		</div>
		
        <div id="container">
            
                <div class="model">
                    <div class="model_name">V6848XG►</div>
                    <div class="bar"></div>
                    
                    <div class="switch" id="V6848XG_10020">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10020"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    <div class="switch" id="V6848XG_10021">
                        <div name="username" class="name"></div>
                        <div name="telnet_port" class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10021"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                                        
                </div>
                
                <div class="model" id="model_V6748XG">
                    <div class="model_name">V6748XG►</div>
                    <div class="bar"></div>
                    
                    <div class="switch" id="V6748XG_10015">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
						<div class="avatar"></div>						
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10015"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    <div class="switch" id="V6748XG_10017">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
						<div class="avatar"></div>
                      
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10017"/>
								<input type="submit" value="" />
							</form>						
						</div>
                    </div>
					
					<div class="switch" id="V6748XG_10018">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10018"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
					
					<div class="switch" id="V6748XG_10019">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10019"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                </div>
                
                <div class="model" id="model_V1916GR">
                    <div class="model_name">V1916GR►</div>
                    <div class="bar"></div>
                    
                    <div class="switch" id="V1916GR_10011">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10011"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    <div class="switch" id="V1916GR_10012">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10012"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    <div class="switch" id="V1916GR_10013">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10013"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
					<div class="switch" id="V1916GR_10014">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10014"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                </div>
                
                <div class="model" id="model_V8500">
                    <div class="model_name">V8500►</div>
                    <div class="bar"></div>
                    
                    <div class="switch" id="V8500_10085">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10085"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    <div class="switch" id="V8500_10086">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10086"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                                       
                </div>
                
                <div class="model" id="model_V5524XG">
                    <div class="model_name">V5524XG►</div>
                    <div class="bar"></div>
                    
                    <div class="switch" id="V5524XG_10025">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10025"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    <div class="switch" id="V5524XG_10026">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10026"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    
                </div>
				
				<div class="model" id="model_V5512G">
                    <div class="model_name">V5212G►</div>
                    <div class="bar"></div>
                    
                    <div class="switch" id="V5212G_10024">
                        <div class="name"></div>
                        <div class="telnet_port"></div>
                        <div class="avatar"></div>
                        <div class="skype"></div>
                        <div class="disconnect">
							<form method="POST" action="disconnect.php" class="disPort">
								<input type="hidden" name="disconnect" value="10024"/>
								<input type="submit" value="" />
							</form>	
						</div>
                    </div>
                    
                    
                </div>
                
		</div>       

		<div id="footer">
			<div class="about">
				<div class="about-content">
					<p>Hanoi R&D Branch © 2013</p>
					<p><b>Version 1.2 | </b>Designed by: <b>quyenlv</b>, <b>vieph</b>, <b>nghianv</b> and <b>anpt</b></p>
				</div>
			</div>
		</div>        
</body>
</html>
